<template>
  <div class="app-container">
    <el-form :model="formData" ref="formDataRef">
      <el-row :gutter="20">
        <el-col :span="4">
          <el-form-item label="城市名称" prop="cityName">
            <el-input v-model="formData.cityName" placeholder="城市名称" clearable style="width: 100%;"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="单位名称" prop="corporation">
            <el-input v-model="formData.corporation" placeholder="单位名称" clearable style="width: 100%;"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="手机号" prop="telephone">
            <el-input v-model="formData.telephone" placeholder="手机号" clearable style="width: 100%;"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="客户名称" prop="customerName">
            <el-input v-model="formData.customerName" placeholder="客户名称" clearable style="width: 100%;"></el-input>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="4">
          <el-form-item label="是否已联系" prop="contacted">
            <el-select v-model="formData.contacted" placeholder="是否已联系" clearable style="width: 100%;" @change="search">
              <el-option v-for="item in yes_or_not" :label="item.dictLabel" :value="item.dictValue"
                :key="item.dictCode"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="是否已购买" prop="buyed">
            <el-select v-model="formData.buyed" placeholder="是否已购买" clearable style="width: 100%;" @change="search">
              <el-option v-for="item in yes_or_not" :label="item.dictLabel" :value="item.dictValue"
                :key="item.dictCode"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="是否为高质量用户" prop="highQuality">
            <el-select v-model="formData.highQuality" placeholder="是否为高质量用户" clearable style="width: 100%;" @change="search">
              <el-option v-for="item in yes_or_not" :label="item.dictLabel" :value="item.dictValue"
                :key="item.dictCode"></el-option>
            </el-select>
          </el-form-item>
        </el-col> -->
      </el-row>
      <el-row>
        <el-col :span="24">
          <ButtonGroup ref="btnGroupRef" @on-search="search" @on-reset="resetSearch">
            <!-- <template v-slot:hole>
              <el-button type="primary" size="small" @click="showDialog">show Dialog</el-button>
            </template> -->
          </ButtonGroup>
        </el-col>
      </el-row>
    </el-form>
    <BaseTable :table-columns="tableColumns" :table-data="tableData" :options="tableOptions" :total="pages.total"
      v-model:page-num="pages.pageNum" v-model:page-size="pages.pageSize" @turnOn="search" :tableLoading="tableLoading">
      <template v-slot:operation="{ row }">
        <el-button type="primary" text @click="handleTableItemEdit(row)">编辑</el-button>
        <el-button type="danger" text @click="handleTableItemDel(row)">删除</el-button>
      </template>
      <template v-slot:icon="{ row }">
        <el-icon v-if="row.icon && row.icon !== '#'">
          <component :is="row.icon"></component>
        </el-icon>
      </template>
      <template v-slot:contacted="{ row }">
        {{ row.contacted === '1' ? '是' : '否' }}
      </template>
      <template v-slot:highQuality="{ row }">
        {{ row.highQuality === '1' ? '是' : '否' }}
      </template>
      <template v-slot:buyed="{ row }">
        {{ row.buyed === '1' ? '是' : '否' }}
      </template>
    </BaseTable>
    <Dialog ref="dialogRef" :title="dialogOptions.title" :width="dialogOptions.width">
      <template v-slot:content>
        hello
      </template>
    </Dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import FSMessage from '@/utils/message'
import useHooksTable from './useHooksTable'
import useHooksDialog from './useHooksDialog'
import BaseTable from '@/components/BaseTable/index.vue'
import Dialog from '@/components/Dialog/index.vue'
import ButtonGroup from '@/components/ButtonGroup/index.vue'
import { resetForm } from '@/utils/tools'
import { FormInstance } from 'element-plus'
import { IPaginationForm } from '@/types/http'
import { yes_or_not } from '@/types/dicts'
import { queryDataAll, createData, updateData, deleteData } from '@/api/customer'
// ------- variable -------
const { tableColumns, tableData, tableOptions } = useHooksTable()
const { dialogOptions } = useHooksDialog()
const formData = ref({
  cityName: '', // 城市名称
  telephone: '', // 电话
  corporation: '', // 单位名称
  customerName: '', // 客户名称
  contacted: '', // 是否已联系
  highQuality: '', // 是否为高质量用户
  buyed: '' // 是否已购买产品
})
const pages = ref({
  pageSize: 20,
  pageNum: 1,
  total: 0
})
const btnGroupRef = ref(null)
const formDataRef = ref(null)
const dialogRef = ref(null)
const tableLoading = ref<boolean>(false)

// ------- function -------

const search = async () => {
  try {
    tableLoading.value = true
    const res = await queryDataAll({ ...pages.value, ...formData.value })
    tableLoading.value = false
    res.data.rows.forEach((item: any, index) => {
      // @ts-ignore
      item.index = index + 1 + (pages.value.pageNum - 1) * pages.value.pageSize
    })
    tableData.value = res.data.rows
    pages.value.total = res.data.total
  } catch (error) {
    FSMessage.error(error)
    tableLoading.value = true
  }
}

const resetSearch = () => {
  resetForm(formDataRef.value)
  search()
}

const handleTableItemEdit = (row) => {

}

const handleTableItemDel = (row) => {

}

const showDialog = () => {
  dialogRef.value.visiableDialog()
}
const initPage = () => {
  search()
}
initPage()
</script>
<style scoped lang="scss"></style>
